<template>
	<div>
		<div class="line">
			<header>
				<router-link to="/index" class="logo"></router-link> 
				<a class="logoText">登录</a>
			</header>
		</div>
		<div class="form">
			<div class="inputWrap">
				<input type="text" @blur="yz()" v-model="username" placeholder="你的手机号/邮箱" autocomplete="off" />
			</div>
			<div class="text">
				<p ref="zh" class="tips">请输入注册时用的邮箱或者手机号呀</p>
			</div>
			<div class="inputWrap">
				<input type="password" @blur="yz()" v-model="psw" placeholder="密码"/>
			</div>
				<div class="text clearfix">
					<span class="forgot">忘记密码?</span>
				</div>
			<div class="text">
				<p ref="mm" class="tips">喵，你没输入密码么？</p>
			</div>
			<div class="btnBox">
				<span class="btn btnlogin" @click="sub">立即登录</span>
				<span class="btn">注册</span>
				
			</div>
		</div>
		<div class="sns">
			<div class="splitter">
				<span class="title">第三方合作网站登录</span>
			</div>
			<a class="weibo"></a>
			<a class="qq"></a>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
//	import {CONFIG} from "@/config/config"
	export default {
		data(){
			return {
				username:"",
				psw:""
			}
		},
		methods:{
			yz(){
				if(this.username==""){
					this.$refs.zh.style.display="block"
//					if(this.psw==""){
//						this.$refs.mm.style.display="block"
//					}
				}else if(this.psw==""){
					this.$refs.zh.style.display="none"
					this.$refs.mm.style.display="block"
				}else{
					this.$refs.zh.style.display="none"
					this.$refs.mm.style.display="none"
				}
				
console.log(this.$refs.zh)
			},
			sub(){
				console.log(this)
				console.log(this.psw)
				axios.post("/login",{
						"username":this.username,
						"psw":this.psw
				})
				.then((res)=>{
					if(res.data.msg=="0"){
						alert("账户或密码输入有误")
					}
					if(res.data.msg=="1"){
						alert("验证成功")
						setTimeout(()=>{
							sessionStorage.setItem("isLogin",true)
//								路由的跳转
							this.$router.push({path:"/space"})
						},1000)
					}
				})
				.catch((e)=>{
					console.log(e)
				})
				
			}
		}
	}
</script>

<style lang="scss" type="text/css">
.sns{
	position: relative;
    text-align: center;
    margin-top: 20px;
    padding-top: 50px;
    >div{
    	border-top: 1px solid #999;
	    top: 15px;
	    left: 0;
	    right: 0;
	    position: absolute;
	    span{
	    	color: #999;
		    position: absolute;
		    left: 50%;
		    margin-left: -25%;
		    top: -15px;
		    height: 30px;
		    width: 50%;
		    text-align: center;
		    line-height: 30px;
		    background: #f5f5f5;
	    }
    }
    >a{
    	outline: 0;
	    color: #00a1d6;
	    text-decoration: none;
	    cursor: pointer;
	    &:first-of-type{
	    	display: inline-block;
		    width: 50px;
		    height: 50px;
		    padding: 0 5px;
		    background-repeat: no-repeat;
		    background-position: 50%;
		    background-size: 50px 50px;
	    	background-image: url();
	    }
	    &:last-of-type{
	    	display: inline-block;
		    width: 50px;
		    height: 50px;
		    padding: 0 5px;
		    background-repeat: no-repeat;
		    background-position: 50%;
		    background-size: 50px 50px;
	    	background-image: url();
	    }
    }
}
.line{
	width: 100%;
	header{
		/*height: 38px;*/
	    line-height: 48px;
	    border: 1px solid #ddd;
	    background: #fff;
	    padding: 15px 15px 2px;
	    a{
	    	outline: 0;
		    color: #00a1d6;
		    text-decoration: none;
		    cursor: pointer;
	    	&:first-of-type{
	    		display: block;
			    width: 63px;
			    height: 28.8px;
			    float: left;
			    margin-top: 3px;
			    margin-right: 12px;
			    background: url(https://static.hdslb.com/account/img/logo-mobile.png);
			    background-size: 63px 28.8px;
	    	}
	    	&:last-of-type{
	    		    height: 42px;
				    border-left: 2px solid #de698c;
				    color: #de698c;
				    font-weight: 700;
				    padding: 17px 0 0 15px;
	    	}
	    }
	}
}
	body{
		background-color: #f5f5f5;
	}
	.clearfix:after{
		content: "";
		display: block;
		clear: both;
	}
	.form{
		padding: 15px;
		box-sizing: border-box;
	}
	.inputWrap{
		border-radius: 6px;
	    margin-bottom: 10px;
	    background: #fff;
	    width: 100%;
	    border: 1px solid #ddd;
	    height: 45px;
	    line-height: 45px;
	    overflow: hidden;
	    box-sizing: border-box;
	    position: relative;
		input{
			width: 100%;
			border: 0;
			outline: none;
		    border-radius: 6px;
    		padding: 10px;
		}
	}
	.tips{
		padding: 0 0 8px 2px;
    	color: #de698c;
    	display: none;
	}
	.btn{
		display: block;
	    border: 1px solid #00a1d6;
	    text-align: center;
	    box-sizing: border-box;
	    width: 100%;
	    border-radius: 32px;
	    padding: 12px;
	    margin-bottom: 10px;
	    color: #00a1d6;
	    background: #fff;
	}
	
	.forgot{
		    float: right;
    		padding: 0 0 8px 2px;
    		color: #00a1d6;
	}
	.btnlogin{
	    background-color: #00a1d6;
    	color: #fff
	}
</style>